<template>
  <div class="suggset-container">
    <ul>
      <li v-for="(item, i) in suggestinfo" :key="i">
        <h3 class="title">{{ item.title }}</h3>
        <p class="authors">{{ item.authors }}</p>
        <p class="content">{{ item.content }}</p>
      </li>
    </ul>
  </div>
</template>


<script>
import { Toast } from "mint-ui";
export default {
  data() {
    return {
      id: this.$route.params.id,
      suggestinfo: [],
    };
  },
  created() {
    this.getsuggest();
  },
  methods: {
    getsuggest() {
      this.$http
        .get("http://api.apiopen.top/getSongPoetry?page=1&count=" + this.id)
        .then((res) => {
          if (res.status == 200) {
            //   console.log(res)
            this.suggestinfo = res.body.result;
            console.log(this.suggestinfo);
            this.suggestinfo.forEach((item) => {
              item.content = item.content.replace(/\|/g, "");
              console.log(item.content);
            });
          } else {
            Toast("服务器异常");
          }
        });
    },
  },
};
</script>


<style lang="less">
.suggset-container {
  width: 100%;
  padding: 0 5px;
  margin-bottom: 60px;

  ul {
    margin: 0;
    padding: 0;
    li {
      border-radius: 20px;
      border: solid 1px #ccc;
      margin: 20px 10px;
      .authors,
      .title {
        text-align: center;
        margin-top: 5px;
      }
      p {
        margin: 0;
        padding: 0;
      }

      .content {
        padding: 8px;
        text-indent: 2em;
      }

      list-style: none;
    }
  }
}
</style>
